<template class=menuData>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="onClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="上级菜单" v-if="type == 2 || type == 4">
                <el-input v-model="ruleForm.parentName" placeholder="上级菜单" disabled></el-input>
            </el-form-item>
            <el-form-item label="菜单代码" prop="code">
                <el-input v-model="ruleForm.code" placeholder="菜单代码" :disabled="type > 2"></el-input>
            </el-form-item>
            <el-form-item label="菜单名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="菜单名称"></el-input>
            </el-form-item>
            <el-form-item label="菜单图标">
                <el-popover placement="bottom" width="388" trigger="click">
                    <div class="icon-box">
                        <ul>
                            <li v-for="item in iconList" :key="item" @click="setIcon(item)"
                                :class="('icon-' + ruleForm.icon) == item ? 'on' : ''">
                                <svg-icon :icon-class="item" className="icon"></svg-icon>
                            </li>
                        </ul>
                    </div>
                    <el-input v-model="ruleForm.icon" placeholder="菜单图标" slot="reference" readonly></el-input>
                </el-popover>
            </el-form-item>
            <el-form-item label="菜单URL" :prop="type == 2 || type == 4 ? 'url' : ''">
                <el-input v-model="ruleForm.url" placeholder="菜单URL"></el-input>
            </el-form-item>
            <el-form-item label="权限标识">
                <el-input v-model="ruleForm.perm" placeholder="权限标识"></el-input>
            </el-form-item>
            <el-form-item label="是否隐藏">
                <el-switch v-model="ruleForm.isHidden" :active-value="1" :inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item label="排序号">
                <el-input-number v-model="ruleForm.sort" controls-position="right" :min="0"
                    :max="1000"></el-input-number>
            </el-form-item>
            <el-form-item style="text-align:right">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import { getAllMenuAPI, menuAPI, } from '@/http'
import iconList from '@/icons/index'
export default {
    name: 'rmenuData-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: 'menuData-page',
            ruleForm: {},
            iconList: iconList,
            dialogFormVisible: false,
            rules: {
                code: [
                    { required: true, message: '请输入菜单代码', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                ],
                url: [
                    { required: true, message: '请输入菜单URL', trigger: 'blur' },
                ],
            },
            // isAdd: true,
            isHandler: false,
            title: '新增目录',
            type: 1,
            typeObj: {},
            tepyOption: [
                {
                    type: 1,
                    title: '新增目录',
                    apiKey: 'createCatalogFn'
                },
                {
                    type: 2,
                    title: '新增菜单',
                    apiKey: 'createMenuFn'
                }, {
                    type: 3,
                    title: '修改目录',
                    apiKey: 'upDataAPI'
                }, {
                    type: 4,
                    title: '修改菜单',
                    apiKey: 'upDataAPI'
                },
            ]
        }
    },
    created() {
        this.getMenu()
    },
    methods: {
        getMenu() {
            getAllMenuAPI().then(res => {
                //console.log('所有部门：', res);
                if (res.code === 200) {
                    this.options = res.data
                }
            })
        },
        onClose() {
            this.$emit('close', this.isHandler)
        },
        setIcon(icon) {
            this.$set(this.ruleForm, 'icon', icon.replace('icon-', ''))
        },
        open(type, row) {
            this.typeObj = this.tepyOption.find(item => item.type === type)
            this.title = this.typeObj.title
            this.type = type
            if (type === 2) {
                //console.log('数据:', row);
                this.ruleForm.parentName = row.name
                this.ruleForm.parentId = row.id
            }
            if (type === 3 || type === 4) {
                //console.log('数据:', row);
                this.ruleForm = Object.assign({}, row)
            }

            this.dialogFormVisible = true;
        },
        submitForm() {
            //console.log('数组11111:', this.ruleForm);
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let params = Object.assign({}, this.ruleForm)
                    menuAPI[this.typeObj.apiKey](params).then(res => {
                        if (res.code === 200) {
                            this.dialogFormVisible = false;
                            this.isHandler = true;
                            this.$message({
                                message: this.title + '成功！',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });
        },
    }

}
</script>

<style scoped lang="less">
.icon-box {
    & ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        & li {
            height: 35px;
            width: 35px;
            text-align: center;
            line-height: 35px;
            margin: 3px;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;

            &:hover,
            &.on {
                border-color: var(--m-c);
                color: var(--m-c);
                background-color: rgba(64, 158, 255, 0.1);
            }
        }
    }
}
</style>